<template>
  <view class="product-detail-container">
    <!-- 商品图片 -->
    <image :src="productDetail.imgUrl" class="product-detail-image"></image>

    <!-- 商品信息 -->
    <view class="product-info">
      <text class="product-name">{{ productDetail.name }}</text>
      <text class="product-price">￥{{ productDetail.price }}</text>
      <text class="product-description">{{ productDetail.description }}</text>

	  
    </view>

    <!-- 购买按钮 -->
    <button class="buy-button" @click="onBuy">购买</button>
  </view>
</template>
<script>
	import request from '@/util/request.js';
	
	export default {
	  data() {
	    return {
	      productDetail: {}, // 存储商品详细信息
	    };
	  },
	  onLoad(options) {
	    // 页面加载时，从页面参数中获取商品ID
	    const productId = options.id;
	    this.fetchProductDetail(productId);
	  },
	  methods: {
	    // 获取商品详细信息
	    async fetchProductDetail(productId) {
	      try {
	        const response = await request({
	          url: `/products/${productId}`,
	          method: 'get'
	        });
	        if (response.data) {
	          this.productDetail = response.data;
			  this.productDetail.imgUrl = '/static/'+ response.data.image_url
	        } else {
	          console.error('Invalid response data:', response.data);
	        }
	      } catch (error) {
	        console.error('Request failed:', error);
	        // 可以在这里添加更多的错误处理逻辑
	      }
	    },
	    // 购买商品
	    onBuy() {
	      // 这里可以调用添加到购物车或直接购买的逻辑
	      // 例如，跳转到购物车页面或显示一个确认购买的对话框
	      console.log('购买商品', this.productDetail);
	    }
	  }
	};
	
	
	
	
	
	
</script>
<style>
/* 商品详细页样式 */
.product-detail-container {
  padding: 10px;
  box-sizing: border-box;
}

.product-detail-image {
  width: 400px;
  height: 300px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.product-info {
  margin-bottom: 20px;
}

.product-name {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.product-price {
  font-size: 18px;
  color: #666;
  margin-bottom: 10px;
}

.product-description {
  font-size: 14px;
  color: #666;
}

.buy-button {
  background-color: #ff4400;
  color: white;
  padding: 10px;
  border-radius: 5px;
}
</style>